<template>
    <div class="table-demo">
        <div class="demo-option">
            <Button @click="openSetPage(false)">打开配置页面</Button>
            <Button @click="openSetPage(true)">打开配置页面-存在远程数据</Button>
            <cs-table-option 
                v-if="setColumnTag"
                :ref="tableKey"
                :optionKey="tableOptionKey"
                :hasLocalOption="hasLocalOption"
                :currentColumData="columData" 
                :configureBoxLoading="setColumnLoading"
                @resetColumn="resetColumn"
                @upOptionData="upOptionData">
            </cs-table-option>
        </div>
        <div class="demo-table">
            <cs-table :ref="'table'+tableKey" :tableData="tableData" :tableColumn="columData" :isShowFooter="true" :footerMethod="footTotal">
                <!-- 内容插槽 -->
                <template v-slot:demo2slot="row">
                    <div>
                        {{row.header.row.demo2}}内容插槽
                        <i-input></i-input>
                    </div>
                </template>
                <!--  -->
            </cs-table>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            tableKey:'testTableInfo',
            tableOptionKey:'testTableInfo',
            setColumnLoading:true,
            hasLocalOption:false,
            setColumnTag:false,
            tableData:[],
            // 开发写在代码逻辑的排序信息
            columData:[
                {
                    key:'demo1',
                    title:'测试字段1',
                    width:'100px',
                    isHide:true,
                    leftFixed:true,
                    rightFixed:false,
                    sort:1,
                },
                {
                    key:'demo2',
                    title:'测试字段2',
                    width:'100px',
                    isHide:true,
                    leftFixed:false,
                    rightFixed:false,
                    sort:2,
                    defaultSlot:'demo2slot',
                    tableSort:1,
                    tableSortNum:0,
                },
                {
                    key:'demo3',
                    title:'测试字段3',
                    width:'100px',
                    isHide:true,
                    leftFixed:false,
                    rightFixed:false,
                    sort:3,
                },
                {
                    key:'demo4',
                    title:'测试字段4',
                    width:'100px',
                    isHide:true,
                    leftFixed:false,
                    rightFixed:false,
                    sort:4,
                },
                {
                    key:'demo5',
                    title:'测试字段5',
                    width:'100px',
                    isHide:true,
                    leftFixed:false,
                    rightFixed:false,
                    sort:5,
                    tableSort:1,
                    tableSortNum:0,
                },
                {
                    key:'demo6',
                    title:'测试字段6',
                    width:'100px',
                    isHide:true,
                    leftFixed:false,
                    rightFixed:false,
                    sort:6,
                },
                {
                    key:'demo7',
                    title:'测试字段7',
                    width:'100px',
                    isHide:true,
                    leftFixed:false,
                    rightFixed:false,
                    sort:7,
                },
                {
                    key:'demo8',
                    title:'测试字段8',
                    width:'100px',
                    isHide:true,
                    leftFixed:false,
                    rightFixed:false,
                    sort:8,
                },
            ],
            // 远程数据
            remoteColumData:[],
        }
    },
    methods: {
        // 表格底部合计
        footTotal({ columns, data }){
            return  [
                ['合计', '2', '44', '67', '-']
            ];
        },
        compare(property){
          return function(a,b){
              var value1 = a[property];
              var value2 = b[property];
              return value1 - value2;
          }
        },
        resetColumn(){},
        upOptionData(result){
            result = JSON.parse(JSON.stringify(result));
            this.columData = result.sort(this.compare('sort'));
            this.$nextTick(()=>{
                this.$refs['table'+this.tableKey].refreshColumn()
            })
        },
        openSetPage(tag){
            this.setColumnTag = true;
            // 获取远程数据
            setTimeout(()=>{
                if(tag){
                    // 存在远程数据
                    this.remoteColumData = [
                        {
                            key:'demo1',
                            title:'测试字段1',
                            width:'10px',
                            isHide:true,
                            leftFixed:true,
                            rightFixed:false,
                            sort:8,
                        },
                        {
                            key:'demo2',
                            title:'测试字段2',
                            width:'10px',
                            isHide:true,
                            leftFixed:true,
                            rightFixed:false,
                            sort:5,
                        },
                        {
                            key:'demo3',
                            title:'测试字段3',
                            width:'10px',
                            isHide:true,
                            leftFixed:true,
                            rightFixed:false,
                            sort:6,
                        },
                        {
                            key:'demo4',
                            title:'测试字段4',
                            width:'104px',
                            isHide:true,
                            leftFixed:true,
                            rightFixed:false,
                            sort:7,
                        },
                        {
                            key:'demo5',
                            title:'测试字段5',
                            width:'100px',
                            isHide:true,
                            leftFixed:true,
                            rightFixed:false,
                            sort:4,
                        },
                        {
                            key:'demo6',
                            title:'测试字段6',
                            width:'100px',
                            isHide:true,
                            leftFixed:true,
                            rightFixed:false,
                            sort:3,
                        },
                        {
                            key:'demo7',
                            title:'测试字段7',
                            width:'150px',
                            isHide:true,
                            leftFixed:true,
                            rightFixed:false,
                            sort:2,
                        },
                        {
                            key:'demo8',
                            title:'测试字段1',
                            width:'100px',
                            isHide:true,
                            leftFixed:true,
                            rightFixed:false,
                            sort:1,
                        },
                    ];
                } else {
                    // 失败，或者没有配置远程数据
                    this.remoteColumData = [];
                }
                if(this.$refs[this.tableKey]){
                    this.$refs[this.tableKey].columnDataComparison();
                }
                this.setColumnLoading = false;
            },1000);
        }
    },
    created () {
        // 获取本地存储的用户自定义数据
        const userTableInfo = localStorage.getItem("tableInfo");
        if(userTableInfo && userTableInfo[this.tableKey]){
            this.columData = JSON.parse(userTableInfo[this.tableKey]);
            this.hasLocalOption = true;
        }
        let demoTable = [];
        for (var i = 0; i < 100; i++) {
            demoTable.push({
                demo1:1,
                demo2:2,
                demo3:3,
                demo4:4,
                demo5:5,
                demo6:6,
                demo7:7,
                demo8:8,
            });
        }
        this.tableData = demoTable;
    }
}
</script>

<style lang="less">
.table-demo{
    display: flex;
    .demo-option{
        height: ~"calc(100vh - 50px)";
        width: 600px;
    }   
    .demo-table{
        height: ~"calc(100vh - 50px)";
        width: ~"calc(100vw - 600px)";
    }
}
</style>